<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="mb-10">
          <el-input v-model="editForm.title" placeholder="名称" size="small"
                    class="w-140 mr-10"></el-input>
          <el-select v-model="editForm.style" placeholder="请选择" size="small" class="mr-10">
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="timeLine"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
            class="mr-10">
          </el-date-picker>
          <el-button type="primary" size="small" @click="searchFn('search')"><i
            class="el-icon-search"></i>搜索
          </el-button>
          <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
          <el-button size="small" @click="addLine(0)">新增围观主题</el-button>
        </div>
      </div>
      <!--本体列表，数据 -->
      <el-table
        ref="multipleTable"
        :data="arryList"
        :stripe="tableStripe"
        :border="tableBorder"
        tooltip-effect="dark"
        header-cell-class-name="table-text-c"
        cell-class-name="table-text-c">
        <el-table-column
          align="center"
          prop="title"
          label="围观主题">
        </el-table-column>
        <el-table-column
          align="center"
          label="展示区域">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.type=='0'" size="mini">全校</el-tag>
            <el-tag type="warning" v-if="scope.row.type=='1'" size="mini">年段</el-tag>
            <el-tag type="warning" v-if="scope.row.type=='2'" size="mini">班级</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="展示星期">
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.show_week" size="mini">星期{{ week[item] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="end_time"
          label="截止展示时间">
        </el-table-column>
        <el-table-column
          align="center"
          prop="laud_number"
          label="点赞数/次">
        </el-table-column>
        <el-table-column
          align="center"
          prop="create_time"
          label="创建时间">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="160">
          <template slot-scope="scope">
            <el-button plain size="mini" @click="addLine(scope.row.id)">编辑</el-button>
            <el-button plain type="danger" size="mini" @click="detelDetailFn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          background
          :page-size="page.pagesize"
          :current-page="page.pageindex"
          layout="total, prev, pager, next"
          :total="page.total"
          @current-change="handleSizeChange"></el-pagination>
      </el-col>
      <editDetail :visible.sync="editVisible" :detailId="detailId" @InitFn="InitFn"></editDetail>
    </div>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import {substituteIndex, substituteDelete} from "@/api/admin/ClassDynamics";
import editDetail from "./components/editDetail";
import {show_index,show_delete} from "@/api/admin/school"

export default {
  components: {editDetail},
  data() {
    return {
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      editForm: {
        start_time: '',
        end_time: '',
        title: '',
        style: 0
      },
      timeLine: [],
      editVisible: false,
      detailId: 0,
      week: {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '日',
      },
      categoryList: [
        {
          id: 0,
          name: '全部'
        },
        {
          id: 1,
          name: '使用中'
        },
        {
          id: 2,
          name: '已截止'
        }]
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.editForm.p = this.page.pageindex
      show_index(this.editForm).then(res => {
        for (let item of res.list.data) {
          item.show_week = item.show_week.split(',')
        }
        this.arryList = res.list.data
        this.page.total = res.list.total
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 搜索组件
    searchFn(option) {
      if (option === 'refresh') {
        this.timeLine = []
        this.editForm.start_time = '';
        this.editForm.end_time = '';
        this.editForm.title = '';
        this.editForm.style = 0;
      } else {
        this.editForm.end_time = this.timeLine && this.timeLine.length ? this.timeLine[1] : '';
        this.editForm.start_time = this.timeLine && this.timeLine.length ? this.timeLine[0] : '';
      }
      this.page.pageindex = 1;
      this.InitFn()
    },
    detelDetailFn(item) {
      console.log('item:', item)
      this.$confirm(`确认永久删除【${item.title}】该围观主题, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(item.id)
      }).catch(() => {
      })
    },
    detelRespon(id) {
      show_delete({id: id}).then(res => {
        console.log('res:', res)
        if (!res.code) {
          this.$message.success('操作成功')
          this.InitFn()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    excelNameFn() {
      let name_ = this.timeLine && this.timeLine.length ? `${this.timeLine[0]}至${this.timeLine[1]}` : ''
      return name_
    },
    addLine(id) {
      this.detailId = id
      this.editVisible = true
    }
  },
  mounted() {
  },
}
</script>

